<template>
	<!-- 顶部 -->
	<el-menu class="el-menu-demo" mode="horizontal" router=true>
		<el-avatar shape="square" :size="40" :src="logo"></el-avatar>
		<el-menu-item  route="/home">
			<span></span>
			<el-icon>
				<home-filled />
			</el-icon>
			主页
		</el-menu-item>
		<el-menu-item  index="/jigsawPuzzleList" >
			<el-icon>
				<grid />
			</el-icon>
			拼图列表
		</el-menu-item>
		<el-menu-item  index="/blindBoxList">
			<el-icon>
				<present />
			</el-icon>
			盲盒列表
		</el-menu-item>
		<el-menu-item index="/signIn" >
			<el-icon>
				<calendar />
			</el-icon>
			签到
		</el-menu-item>
		<el-sub-menu >
			<template #title>
				<el-icon>
					<user />
				</el-icon>
				个人中心
			</template>
			<el-menu-item index="personalCenter" >个人信息</el-menu-item>
			<!-- @click="logout()" -->
			<el-menu-item  index="login" @click="logout()">退出登录</el-menu-item>
		</el-sub-menu>

		<!-- 用户头像 -->
		<el-avatar :src="user.profilePhoto"></el-avatar>
	</el-menu>
	<div class="top">
		<!-- <span>&nbsp;</span> -->
	</div>
	<!-- 下面 -->
	<div class="bottom">
		<!-- 侧边栏 -->
		<div class="sider">

		</div>
		<!-- 内容区域 -->
		<div class="content">
			<router-view />
		</div>
	</div>
</template>

<script>
	// import qs from 'qs'
	//显示本地图片: 方法一:引入图片文件;方法二:使用<img/>标签
	import logo from '@/assets/logo.png'
	import localstorage from '@/utils/localstorage.js'
	import {
		HomeFilled,
		Grid,
		Present,
		Calendar,
		User,
	} from '@element-plus/icons-vue'
	export default {
		name: "Index",
		components: {
			HomeFilled: HomeFilled,
			Grid: Grid,
			Present: Present,
			Calendar:Calendar,
			User: User,
		},
		data() {
			return {
				user: {
					id: '',
					headPortrait: '', //头像
				},
				logo: logo,
			}
		},
		mounted() {
			this.getUserInfo();
		},
		methods: {
			getUserInfo() {
				//获取本地存储的 uid,
				this.user.id = localstorage.get('uid');
				// console.log("userId="+userId);
				this.$axios.get('/api/user/getInfo', {
						params: {
							// id: this.id
						}
					})
					.then(data => {
						//将响应结果数据赋值给 user对象
						this.user = data.user;
						// console.log("this.user.profilePhoto=" + this.user.profilePhoto);
					}).catch(error => {
						console.log("error:" + error)
					})
			},
			homepage() {//转到主页
				this.$router.push('/home');
			},
			jigsawPuzzleList() {//转到拼图列表页
				this.$router.push('/jigsawPuzzleList');
			},
			blindBoxList() {//转到盲盒页
				this.$router.push('/blindBoxList');
			},
			signIn(){//转到签到页面
				this.id = this.$route.query.id;
				// console.log("Index.vue : this.id="+this.id)
				this.$router.push({
					path: '/signIn',
					params: {
						id: this.id
					}
				});
			},
			personalCenter() {//转到个人中心
				// this.id = this.$route.query.id;
				this.$router.push({
					path: '/personalCenter'
				});

			},
			//注销登录,退出登录
			logout() {
				console.log("退出登录")
				//移除 uid和 token
				localstorage.remove('uid')//移除uid
				localstorage.remove('token')//移除token
				
				this.$router.push('/login');
			}
		}
	}
</script>

<style scoped>
	.top {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		height: 68px;
		/* border: #2c3e50 solid 1px; */
	}
	/* .bottom {
		display: flex;
	} */
	/* .sider {
		position: absolute;
		top: 82px;
		left: 0px;
		bottom: 0px;
		width: 180px;
		border: #2c3e50 solid 1px; 
	} */
	/* .sider li {
		list-style: none;
		margin-left: 0rem;
	} */
	.content {
		position: absolute;
		/* padding: 0px 60px 0px 60px; */
		/* width: 1440px; */
		top: 80px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		/* border: #2c3e50 solid 1px; */
	}
	.el-menu-demo{
		position: fixed;
		left:0px;
		width: 1400px;
		z-index: 3;
		width: 1000px;
		top: 0px;
	}
</style>
